<script setup lang="ts">
import { pageArticleVo } from '@/api/article'
import { CategoryVo } from '@/api/category/type'
import { ArticleVo, PageArticleReq } from '@/api/article/type'
import useStore from '@/store'
import { getQueryVariable } from '@/utils/publicMethods'

const store = useStore()
/** 分类名称 */
const selectCategoryName = ref('')
/** 选中分类ID */
const selectCategoryId = ref(-1)
/** 展示文章列表 */
const dataList = ref(<Array<ArticleVo>>[])
/** 总数 */
const total = ref()
/** 是否展示加载更多 */
const isNeedLoadMore = ref(true)
/** 数据是否正在加载 */
const isDataLoading = ref(false)

/** 查询参数 */
const queryParams = ref(<PageArticleReq>{
  pageNum: 1,
  pageSize: 10,
  type: 'CATEGORY',
  businessId: 0
})

/** 查询展示文章列表 */
async function queryArticleListByBId(val: number) {
  queryParams.value.businessId = val
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  isDataLoading.value = true
  await pageArticleVo(queryParams.value).then(({ data: response }) => {
    dataList.value = response.data.records
    total.value = response.data.total
    const a = Math.ceil(total.value / queryParams.value.pageSize)
    isNeedLoadMore.value = queryParams.value.pageNum + 1 <= a
  })
  isDataLoading.value = false
}

/** 分类跳转 */
function categoryClick(category: CategoryVo) {
  if (!category) {
    return
  }
  selectCategoryName.value = category.name
  console.log(category.id)
  selectCategoryId.value = category.id
  queryArticleListByBId(category.id)
}

/** 加载更多 */
async function loadMore() {
  const a = Math.ceil(total.value / queryParams.value.pageSize)
  if (queryParams.value.pageNum + 1 >= a) {
    isNeedLoadMore.value = false
  }
  if (queryParams.value.pageNum + 1 <= a) {
    queryParams.value.pageNum = 1 + queryParams.value.pageNum
    isDataLoading.value = true
    await pageArticleVo(queryParams.value).then(({ data: response }) => {
      dataList.value = [...dataList.value, ...response.data.records]
    })
    isDataLoading.value = false
  }
}

onMounted(async () => {
  // 获取网页地址携带参数
  const id = getQueryVariable('id')
  if (id) {
    await queryArticleListByBId(Number.parseInt(id))
  }
})
</script>

<template>
  <CommonContainerTemplate>
    <template #default>
      <!--分类-->
      <h1 class="flex-center">
        <el-icon>
          <Menu />
        </el-icon>
        分类 ({{ store.categories.length }})
      </h1>
      <!--分类展示列表-->
      <el-card class="category-card" shadow="hover">
        <ul class="category-list">
          <li v-for="category in store.categories" :key="category.id" class="category-list-item">
            <a
              :style="[selectCategoryId == category.id ? 'color: #8e8cd8;' : '']"
              @click="categoryClick(category)"
            >
              {{ category.name }}
              <span class="category-count">({{ category.articleCount }})</span>
            </a>
          </li>
        </ul>
      </el-card>
      <!--文章展示列表-->
      <div v-show="dataList.length > 0">
        <h1 class="flex-center">
          <el-icon>
            <Menu />
          </el-icon>
          {{ selectCategoryName }}
        </h1>
        <el-space direction="vertical" fill size="large" style="display: flex">
          <ArticleCardList
            :loading="isDataLoading"
            :data-list="dataList"
            :is-need-load-more="isNeedLoadMore"
            @load-more="loadMore"
          />
        </el-space>
      </div>
    </template>
  </CommonContainerTemplate>
</template>

<style scoped>
.category-card {
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  .category-list {
    margin: 0 1.8rem;
    list-style: none;
    .category-list-item {
      padding: 8px 1.8rem 8px 0;
      box-sizing: inherit;
      &::before {
        display: inline-flex;
        position: relative;
        left: -0.75rem;
        width: 12px;
        height: 12px;
        border: 0.2rem solid #49b1f5;
        border-radius: 50%;
        background: #fff;
        content: '';
        transition-duration: 0.3s;
      }
      &:hover:before {
        border: 0.2rem solid #ff7242;
      }
      > a {
        color: #4c4948;
        text-decoration: none;
        font-weight: 700;
        cursor: pointer;
        :not(:hover) {
          transition: all 0.3s;
        }
        &:hover {
          transition: all 0.3s;
          color: #8e8cd8;
        }
      }
      .category-count {
        margin-left: 0.5rem;
        font-size: 0.75rem;
        color: #858585;
      }
    }
  }
}

.selected-category {
  color: #8e8cd8;
}

ul {
  //margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}
</style>
